<!Doctype html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script type="text/javascript">
$(function () {
    $('#responsiveTable').BootstrapTable({
    	responsive: true,
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		data: user,
		usePager: true
		/*
		actions: [
				    {
				    	text: '<button class="btn btn-success btn-sm">新增</button>',
				    	position: 'top',
				    	execute: function(){
				    	    alert(1);
				    	}
				    },
				    {
				    	text: '<button class="btn btn-success btn-xs">修改</button>',
				    	position: 'right',
				    	execute: function(data,row){
				    	    alert(JSON.stringify(data));
				    	}
				    },
				],
				conditions: [
		 		    {
				    	name: 'userName',
				    	placeHolder: '姓名',
				    	op: '='
				    },		             
				    {
				    	name: 'loginName',
				    	placeHolder: '登录名',
				    	op: '='
				    }
				],
				*/
	});
    
    $('#showModeTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone', showMode: 'sm'},
			{display : '移动电话', name: 'userMPhome', showMode: 'md'},
			{display : '电子邮箱', name: 'userEmail', showMode: 'lg'},
		],
		data: user,
		usePager: false
	});
});

</script>
</head>
<body>
    <div class="container">
        <nav id="menu"></nav>
		<div class="panel panel-default">
	        <div class="panel-heading">响应式表格</div>
			<div class="panel-body">
			    <div id="responsiveTable"></div>
		     </div>
		     <div class="panel-footer">
		                             响应式表格简略使用说明：                                                                                                                                           </br>
			    $('#responsiveTable').BootstrapTable({                 </br>
			    	responsive: true,                                  </br>
					columns: [                                         </br>
						{display : '登录名', name: 'loginName'},         </br>
						{display : '姓名', name: 'userName'},            </br>
						{display : '电话', name: 'userPhone'},           </br>
						{display : '移动电话', name: 'userMPhome'},        </br>
						{display : '电子邮箱', name: 'userEmail'},         </br>
					],                                                   </br>
					data: user,                                          </br>
					usePager: true                                       </br>
				});                                                      </br>
				响应式表格与简单表格不同的是定义了responsive属性为true		             </br>
				在小屏幕下当table显示不全时会出现横向滚动条而不会每个单元格换行                                                   </br>
				此外，表格下部的分页标签会自动变成“上一页”和“下一页”两个按钮                                                           </br>
				注：可以通过缩小和放大浏览器来体验响应式效果                                                                                                      </br>    
		     </div>
	    </div>
	    
		<div class="panel panel-default">
	        <div class="panel-heading">响应式显示列表格</div>
			<div class="panel-body">
			    <div id="showModeTable"></div>
		     </div>
		     <div class="panel-footer">
		                            响应式显示列表格简略说明：                                                                                                                                                                                      </br>
			    $('#showModeTable').BootstrapTable({                                   </br>
					columns: [                                                          </br>
						{display : '登录名', name: 'loginName'},                         </br>
						{display : '姓名', name: 'userName'},                             </br>
						{display : '电话', name: 'userPhone', showMode: 'sm'},             </br>
						{display : '移动电话', name: 'userMPhome', showMode: 'md'},          </br>
						{display : '电子邮箱', name: 'userEmail', showMode: 'lg'},          </br>
					],                                                                     </br>
					data: user,                                                            </br>
					usePager: false                                                        </br>
				});	                                                                         </br>
				与简单表格不同的是响应式显示列表格对每列定义了showMode属性                                                                                                                     </br>
				showMode属性分为'xs'、'sm'、'md'、'lg'四种，分别对应超小屏幕、小屏幕、中屏幕和大屏幕	          </br>
				当showMode为'xs'时表示超小屏幕及以上可见，当showMode为'sm'时表示小屏幕及以上可见，以此类推 ，默认为'xs'  </br>
				本例定义的意思为当超小屏幕时只有登录名和姓名可见，当小屏幕时增加电话可见，当中屏幕时再增加移动电话可见，当大屏幕时所有字段都可见   </br>
		     </div>
	    </div>	    
	</div>
</body>
</html>